import React, { Component } from "react";
import { Table, Button, Space, Modal, message } from "antd";
import EditAdd from "./EditAdd";
import EditForm from "./EditForm";

export default class Admin extends Component {
  columns = [
    {
      title: "管理员姓名",
      dataIndex: "userName",
    },
    {
      title: "手机号（账号）",
      dataIndex: "phone",
    },
    {
      title: "密码",
      dataIndex: "",
      render: () => <span>******</span>,
    },
    {
      title: "操作",
      dataIndex: "",
      key: "x",
      render: (e) => (
        <Space size="middle">
          <Button
            size="small"
            type="primary"
            onClick={() => this.editFormClick(e)}
          >
            编辑
          </Button>
          <Button
            size="small"
            type="primary"
            onClick={() => this.deleteClick(e)}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];
  state = {
    multiData: null,
    showEditForm: false,
    showModal: false,
    editFormData: null,
    loading: false,
  };
  componentDidMount() {
    this.getData();
  }
  editFormClick = (e) => {
    this.setState({
      showEditForm: true,
      editFormData: e,
    });
  };
  closeEditForm = () => {
    this.setState({
      showEditForm: false,
      editFormData: null,
    });
  };
  deleteClick = (e) => {
    this.setState({
      showModal: true,
      editFormData: e,
    });
  };
  deleteItem = async () => {
    this.setState({
      showModel: false,
      loading: true,
    });
    await this.http("admin/" + this.state.editFormData.id, {}, "DELETE");
    message.success("删除成功!");
    this.setState({
      loading: false,
    });
    this.getData();
  };
  closeModel = () => {
    this.setState({
      showModal: false,
    });
  };
  async getData() {
    this.setState({
      loading: true,
    });
    const res = await this.http("admin");
    this.setState({
      multiData: res.data.dtos,
      loading: false,
    });
  }
  render() {
    return (
      <div>
        <Modal
          title=""
          onCancel={this.closeModel}
          onOk={() => {
            this.deleteItem();
            this.closeModel();
          }}
          visible={this.state.showModal}
        >
          确认删除吗？
        </Modal>
        <div className="header">
          <EditAdd
            refresh={() => {
              this.getData();
            }}
          ></EditAdd>
        </div>
        <EditForm
          refresh={() => {
            this.getData();
            this.closeEditForm();
          }}
          closeEditForm={() => {
            this.closeEditForm();
          }}
          editFormData={this.state.editFormData}
          showEditForm={this.state.showEditForm}
        ></EditForm>
        <Table
          loading={this.state.loading}
          rowKey={(data) => data.id}
          columns={this.columns}
          dataSource={this.state.multiData}
        />
      </div>
    );
  }
}
